<script setup>
import { ref, defineProps, onMounted, watch, reactive, nextTick } from "vue";
import { useRoute, useRouter } from "vue-router";
// 堆积柱状图
import StackBar from "./stack.vue";
import WaterLevel from "./waterLevel.vue";
import ClearHeight from "./clearHeight.vue";
import DatePicker from "./datePicker.vue";
import {
  getBaseInfo,
  getWaterWayInspection,
  getRelationBridge,
  getWaterLevelAndDepth,
  getWaterLevelStatistic,
  getNetHeightStatistic,
  getShipNavigationStatistic,
  getNavigationMark,
} from "../../../utils/apis";
//首先在setup中定义
const router = useRouter();
// 航道对应的tab
const props = defineProps({ id: Number, itemId: String });
const waterwayId = props.itemId || "";
const pickerCom=ref(null)//获取日期组件
// 基本信息
const BaseInfoData = ref({});
// 巡检情况
const WaterWayInspectionData = ref({});
// 航标情况
const navigationMarkData = ref({});
// 关联桥梁
const RelationBridgeData = ref([]);
// 最高最低水位水深
const WaterLevelAndDepth = ref({});
// 水位统计
const WaterLevelStatistic = ref([]);
// 水位净高统计
const NetHeightStatistic = ref([]);
// 通航统计
const ShipNavigationStatistic = ref([]);
var date = new Date();
var day = date.getDate();

const goToBridge = (val) => {
  router.push({
    path: "/bridgeSituation",
    query: { id: val },
  });
};
const bridgeList = ref([]);
// 回显在下拉框的桥梁id
const bridgeId = ref("");
const data = ref({});
// 按日获取最高最低水位水深,status==1（按日）=2（按月）=3（按年）=4（自定义）
const getWaterLevelAndDepthByDay = (
  bridgeId,
  time,
  status,
  beginTime,
  endTime
) => {
  if (status == 1) {
    getWaterLevelAndDepth(bridgeId, time, null, null, true).then((res) => {
      if (res.code == 200) {
        WaterLevelAndDepth.value = res.data[0];
      }
    });
  }
  if (status == 2) {
    getWaterLevelAndDepth(bridgeId, time, null, true, null).then((res) => {
      if (res.code == 200) {
        WaterLevelAndDepth.value = res.data[0];
      }
    });
  }
  if (status == 3) {
    getWaterLevelAndDepth(bridgeId, time, true, null, null).then((res) => {
      if (res.code == 200) {
        WaterLevelAndDepth.value = res.data[0];
      }
    });
  }
  if (status == 4) {
    getWaterLevelAndDepth(
      bridgeId,
      null,
      null,
      null,
      null,
      beginTime,
      endTime
    ).then((res) => {
      if (res.code == 200) {
        WaterLevelAndDepth.value = res.data[0];
      }
    });
  }
};
// 按日获取船类型,status==1（按日）=2（按月）=3（按年）=4（自定义）
const getShipNavigationStatisticByDay = (
  waterwayId,
  time,
  status,
  beginTime,
  endTime
) => {
  if (status == 1) {
    getShipNavigationStatistic(waterwayId, time, null, null, true).then((res) => {
      if (res.code == 200) {
        ShipNavigationStatistic.value = res.data[0];
      }
    });
  }
  if (status == 2) {
    getShipNavigationStatistic(waterwayId, time, null, true, null).then((res) => {
      if (res.code == 200) {
        ShipNavigationStatistic.value = res.data[0]
      }
    });
  }
  if (status == 3) {
    getShipNavigationStatistic(waterwayId, time, true, null, null).then((res) => {
      if (res.code == 200) {
        ShipNavigationStatistic.value = res.data[0]
      }
    });
  }
  if (status == 4) {
    getShipNavigationStatistic(
      waterwayId,
      null,
      null,
      null,
      null,
      beginTime,
      endTime
    ).then((res) => {
      if (res.code == 200) {
        ShipNavigationStatistic.value = res.data[0]
      }
    });
  }
};

watch(waterwayId, (newVal, oldVal) => {}, {
  deep: true,
  immediate: true,
});
watch(
  bridgeId,
  (newVal, oldVal) => {
  },
  {
    deep: true,
    immediate: true,
  }
);
// 改变桥梁重新请求数据
const changeBridgeId = (val) => {
  getWaterLevelAndDepthByDay();
  // 最高最低水位,默认传入航道的第一座桥和当前日
  getWaterLevelAndDepthFn();
  pickerCom.value.getData(0)
};
const getWaterLevelAndDepthFn = () => {
  getWaterLevelAndDepth(bridgeId.value, day, null, null, true).then((res) => {
    if (res.code == 200) {
      WaterLevelAndDepth.value = res.data[0];
    }
  });
};
const page = ref(1);
const size = ref(5);
const currentIndex = ref(0);
let totalPage = ref(0); //总页数
const beginTime = ref("");
const endTime = ref("");
// 分页
const previousPage = () => {
  if (currentIndex.value == 0) {
    return;
  } else {
    currentIndex.value--;
    getWaterWayInspection(waterwayId, currentIndex.value + 1, size.value).then(
      (res) => {
        if (res.code == 200) {
          WaterWayInspectionData.value = res.data.list;
        }
      }
    );
  }
};
const nextPage = () => {
  if (currentIndex.value == totalPage.value - 1||currentIndex.value ==totalPage.value) {
    return;
  } else {
    currentIndex.value++;
    getWaterWayInspection(waterwayId, currentIndex.value + 1, size.value).then(
      (res) => {
        if (res.code == 200) {
          WaterWayInspectionData.value = res.data.list;
        }
      }
    );
  }
};


// 日期更改
const changeTime=(val)=>{
  // 第一个具体日子,第二个类型(日,月,年)
  if(props.id==3){
     switch(val[1]){
    case 0:
    getWaterLevelAndDepthByDay(bridgeId.value,val[0],1);
    break;  
    case 1:
    getWaterLevelAndDepthByDay(bridgeId.value,val[0],2);
    break;  
    case 2:
    getWaterLevelAndDepthByDay(bridgeId.value,val[0],3);
    break;  
    default:
    getWaterLevelAndDepthByDay(bridgeId.value,null,4,val[0],val[1]);
    break;  
  }
  getWaterLevelAndDepthByDay()
  }else if(props.id==4){
       switch(val[1]){
    case 0:
    getShipNavigationStatisticByDay(waterwayId,val[0],1);
    break;  
    case 1:
    getShipNavigationStatisticByDay(waterwayId,val[0],2);
    break;  
    case 2:
    getShipNavigationStatisticByDay(waterwayId,val[0],3);
    break;  
    default:
    getShipNavigationStatisticByDay(waterwayId,null,4,val[0],val[1]);
    break;  
  }
  }
 
}
onMounted(() => {
  endTime.value = new Date().format("yyyy-MM-dd");
  beginTime.value = new Date().format("yyyy-MM-dd");
  // 基本信息
  getBaseInfo(waterwayId).then((res) => {
    if (res.code == 200) {
      BaseInfoData.value = res.data[0];
    }
  });
  // 巡检情况
  getWaterWayInspection(waterwayId, page.value, size.value).then((res) => {
    if (res.code == 200) {
      WaterWayInspectionData.value = res.data.list;
      totalPage.value = Math.ceil(res.data.total / 5); //获取总页数
      return totalPage.value;
    }
  });
  // 航标情况
  getNavigationMark(waterwayId).then((res) => {
    if (res.code == 200) {
      navigationMarkData.value = res.data[0];
    }
  });
  // 关联桥梁
  getRelationBridge(waterwayId).then((res) => {
    if (res.code == 200) {
      RelationBridgeData.value = res.data;
      RelationBridgeData.value.map((el) => {
        let item = { text: "", value: "" };
        item.text = el.bridgeName;
        item.value = el.id;
        bridgeList.value.push(item);
        // 默认下拉框回显第一座桥
        bridgeId.value = bridgeList.value[0].value;
      });
      // 最高最低水位,默认传入航道的第一座桥和当前日
      getWaterLevelAndDepth(bridgeId.value, day, null, null, true).then(
        (res) => {
          if (res.code == 200) {
            WaterLevelAndDepth.value = res.data[0];
          }
        }
      );
      getWaterLevelStatistic(bridgeId.value, day, null, null, true).then(
        (res) => {
          if (res.code == 200) {
            WaterLevelStatistic.value = res.data[0];
          }
        }
      );
      getNetHeightStatistic(bridgeId.value, day, null, null, true).then(
        (res) => {
          if (res.code == 200) {
            NetHeightStatistic.value = res.data[0];
          }
        }
      );
    }
  });
  getWaterLevelAndDepthByDay()
});
</script>

<template>
  <div class="main">
    <!-- 基本情况 -->
    <div class="Basicinformation" v-if="props && props.id == 1">
      <div class="bottom">
        <div class="item">
          <div class="left">航道名称</div>
          <div class="right" style="color: rgba(0, 0, 0, 0.9)">
            {{ BaseInfoData.waterwayName || "--" }}
          </div>
        </div>
        <div class="item">
          <div class="left">技术等级</div>
          <div class="right" style="color: rgba(0, 0, 0, 0.9)">
            {{ BaseInfoData.technicalLevel }}
          </div>
        </div>
        <div class="item">
          <div class="left">维护等级</div>
          <div class="right" style="color: rgba(0, 0, 0, 0.9)">
            {{ BaseInfoData.maintenanceLevel || "--" }}
          </div>
        </div>
        <div class="item">
          <div class="left">维护水深</div>
          <div class="right" style="color: rgba(0, 0, 0, 0.9)">
            {{ BaseInfoData.maintainWaterDepth || "--" }}m
          </div>
        </div>
        <div class="item">
          <div class="left">维护宽度</div>
          <div class="right" style="color: rgba(0, 0, 0, 0.9)">
            {{ BaseInfoData.maintainWidth || "--" }}m
          </div>
        </div>
        <div class="item">
          <div class="left">弯曲半径</div>
          <div class="right" style="color: rgba(0, 0, 0, 0.9)">
            {{ BaseInfoData.bendRadius || "--" }}m
          </div>
        </div>
        <div class="item">
          <div class="left">设标里程</div>
          <div class="right" style="color: rgba(0, 0, 0, 0.9)">
            {{ BaseInfoData.mileage || "--" }}km
          </div>
        </div>
        <div class="item">
          <div class="left">航标配布类别</div>
          <div class="right" style="color: rgba(0, 0, 0, 0.9)">
            {{ BaseInfoData.beaconCategory || "--" }}
          </div>
        </div>
        <div class="item">
          <div class="left">航道维护类别</div>
          <div class="right" style="color: rgba(0, 0, 0, 0.9)">
            {{ BaseInfoData.maintenanceCategory || "--" }}
          </div>
        </div>
        <div class="item">
          <div class="left">水流流速</div>
          <div class="right" style="color: rgba(0, 0, 0, 0.9)">
            {{ BaseInfoData.riverRate || "--" }}m/s
          </div>
        </div>
        <div class="item">
          <div class="left">水流流向</div>
          <div class="right" style="color: rgba(0, 0, 0, 0.9)">
            {{ BaseInfoData.riverDirection || "--" }}
          </div>
        </div>
        <div class="item">
          <div class="left" id="--">
            通航保证率<van-icon name="warning" color="#E10000" />
          </div>
          <div class="right" style="color: rgba(0, 0, 0, 0.9)">
            {{ BaseInfoData.navigationGuaranteeRate || "--" }}
          </div>
        </div>
        <div class="item">
          <div class="left">设计最高通航水位</div>
          <div class="right" style="color: rgba(0, 0, 0, 0.9)">
            {{ BaseInfoData.highestNavigationDesign || "--" }}
          </div>
        </div>
        <div class="item">
          <div class="left">水下碍航物情况</div>
          <div class="right" style="color: rgba(0, 0, 0, 0.9)">
            {{ BaseInfoData.obstacleSituation || "--" }}
          </div>
        </div>
      </div>
      <!-- 证书信息 -->
      <div class="CertificateInformation">
        <div class="reTop">
          <div class="title">通航要素信息</div>
          <div class="CertificateBox" style="margin-top: 16px">
            <div class="CertificateItem" style="padding-left: 18px">
              <div class="CertificateItemTop">码头数量</div>
              <div class="CertificateItemBottom">
                {{ BaseInfoData.wharfNum || "--" }}
              </div>
            </div>
            <div class="CertificateItem" style="padding-left: 18px">
              <div class="CertificateItemTop">水文站数量</div>
              <div class="CertificateItemBottom">
                {{ BaseInfoData.hydrologicalStationsNum || "--" }}
              </div>
            </div>
            <div class="CertificateItem" style="padding-left: 18px">
              <div class="CertificateItemTop">视频监控点数量</div>
              <div class="CertificateItemBottom">
                {{ BaseInfoData.monitorNum || "--" }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 巡检情况  -->
    <div class="InspectionSituation" v-if="props && props.id == 2">
      <!-- 航标情况 -->
      <div class="navigatioMark">
        <div class="checkTableBox">
          <div class="checkTop">
            <div class="title">航道巡查记录表</div>
          </div>
          <div class="checkCenter">
            <div class="timePick">
              <div class="left">
                <input
                  class="inputTime"
                  type="date"
                  v-model="beginTime"
                  name=""
                  id=""
                  placeholder="开始时间"
                />
              </div>
              <div style="padding: 0 9px">至</div>
              <div class="right">
                <input
                  class="inputTime"
                  type="date"
                  v-model="endTime"
                  name=""
                  id=""
                  placeholder="结束时间"
                />
              </div>
            </div>
            <div class="documentBox">
              <table cellpadding="4" class="table">
                <tr>
                  <th>序号</th>
                  <th>巡查时间</th>
                  <th>操作</th>
                </tr>
                <tr v-for="(item, index) in WaterWayInspectionData">
                  <td class="td">{{ index + 1 }}</td>
                  <td class="td">{{ item.inspectionTime }}</td>
                  <td class="handle td" v-on:click="viewContent(item)">查看</td>
                </tr>
              </table>
              <div class="leftPaginate" @click="previousPage"></div>
              <div class="rightPaginate" @click="nextPage"></div>
              <div class="dot">
                <div
                  class="item"
                  v-for="(item, index) in 6"
                  :class="currentIndex == index ? 'active' : 'item'"
                  :key="index"
                ></div>
              </div>
            </div>
          </div>
        </div>

        <div class="markSituation">
          <div class="InsTop">
            <div class="title">航标情况</div>
          </div>
          <div class="InsCenter">
            <div class="InsItem" style="margin-left: 38px">
              <div class="InsItemTop shore">岸标数</div>
              <div class="InsItemBottom">
                {{ navigationMarkData.mark1Num }}
              </div>
            </div>
            <div class="InsItem" style="margin-right: 42px; margin-left: 42px">
              <div class="InsItemTop">浮标数</div>
              <div class="InsItemBottom">
                {{ navigationMarkData.mark2Num }}
              </div>
            </div>
            <div class="InsItem" style="margin-right: 38px">
              <div class="InsItemTop fixed">固定标数</div>
              <div class="InsItemBottom">
                {{ navigationMarkData.mark3Num }}
              </div>
            </div>
          </div>
          <div class="InsBottom">
            <div class="BLeft">
              <span class="left">在线率</span>
              <span class="right">{{ navigationMarkData.onlinerate }}%</span>
            </div>
            <div class="BRight">
              <span class="left">异常数</span>
              <span
                class="right"
                style="color: #e10000"
                v-if="
                  navigationMarkData.asexceptionnum &&
                  navigationMarkData.asexceptionnum != ''
                "
                >{{ navigationMarkData.asexceptionnum }}</span
              >
              <span class="right" v-else>无异常</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 水位净高 -->
    <div class="WaterLevel" v-if="props && props.id == 3">
      <!-- 选择桥梁 -->
      <van-dropdown-menu>
        <van-dropdown-item
          v-model="bridgeId"
          :options="bridgeList"
          @change="changeBridgeId"
        />
      </van-dropdown-menu>
      <!-- 日期选择 -->
      <div class="pickerBox">
        <DatePicker ref="pickerCom" @changeTime="changeTime"></DatePicker>
      </div>
      <!-- 水位显示 -->
      <div class="waterMeasurement">
        <div class="item">
          <div class="top">最高水位</div>
          <div class="bottom">
            {{ WaterLevelAndDepth.maxwaterlevel || "--" }}m
          </div>
        </div>
        <div class="item">
          <div class="top">最低水位</div>
          <div class="bottom">
            {{ WaterLevelAndDepth.minwaterlevel || "--" }}m
          </div>
        </div>
        <div class="item">
          <div class="top">最高水深</div>
          <div class="bottom">
            {{ WaterLevelAndDepth.maxwaterdepth || "--" }}m
          </div>
        </div>
        <div class="item">
          <div class="top">最低水深</div>
          <div class="bottom">
            {{ WaterLevelAndDepth.minwaterdepth || "--" }}m
          </div>
        </div>
      </div>
      <!-- 水位echart图 -->
      <div class="waterLevelBox">
        <WaterLevel></WaterLevel>
        <ClearHeight></ClearHeight>
      </div>
    </div>
    <!-- 通航情况 -->
    <div class="NavigationSituation" v-if="props && props.id == 4">
      <!-- 日期选择 -->
      <div class="pickerBox">
        <DatePicker @changeTime="changeTime"></DatePicker>
      </div>
      <!-- 堆积柱状图 -->
      <div class="echartBox">
        <StackBar :waterwayId="waterwayId"></StackBar>
      </div>
    </div>
    <!-- 关联桥梁 -->
    <div class="AssociatedBridge" v-if="props && props.id == 5">
      <div
        class="bridgeItem"
        v-for="item in RelationBridgeData"
        :key="item.id"
        @click="goToBridge(item.id)"
      >
        <div class="bridegItemL">{{ item.bridgeName }}</div>
        <div class="bridegItemR">&#xe618;</div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
// 基本信息
.Basicinformation {
  margin: 12px 16px 0px 16px;
  .top {
    margin-bottom: 12px;
    .img {
      height: 146px;
      width: 100%;
    }
  }
  .bottom {
    background-color: #fff;
    padding: 16px;
    box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.12);
    border-radius: 6px 6px 6px 6px;
    .item {
      margin-bottom: 16px;
      font-size: 14px;
      font-family: PingFang SC-Regular, PingFang SC;
      font-weight: 400;
      color: rgba(0, 0, 0, 0.6);
      display: flex;
      justify-content: space-between;
    }
  }
  // 证书信息
  .CertificateInformation {
    margin-top: 12px;
    .reTop {
      padding: 16px 16px 16px 16px;
      background: #ffffff;
      box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.12);
      border-radius: 6px 6px 6px 6px;
      margin-bottom: 16px;
      .title {
        font-size: 14px;
        font-family: PingFang SC-Medium, PingFang SC;
        font-weight: 500;
        color: #000000;
        position: relative;
      }
      .title::before {
        content: "";
        width: 2px;
        height: 12px;
        position: absolute;
        left: -16px;
        top: 4px;
        background-color: #276fe8;
      }
      .CertificateBox {
        display: flex;
        .CertificateItem {
          display: flex;
          flex-direction: column;
          align-items: center;
          .CertificateItemTop {
            margin-bottom: 16px;
            font-size: 14px;
            font-family: PingFang SC-Regular, PingFang SC;
            font-weight: 400;
            color: #000000;
          }
          .CertificateItemBottom {
            font-size: 18px;
            font-family: PingFang SC-Medium, PingFang SC;
            font-weight: 500;
            color: #276fe8;
          }
        }
      }
    }
  }
}

// 巡航情况
.InspectionSituation {
  .navigatioMark {
    .checkTableBox {
      margin: 0 16px;
      padding: 16px 16px 24px 16px;
      background: #ffffff;
      box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.12);
      border-radius: 6px 6px 6px 6px;
      margin-bottom: 16px;
      .checkTop {
        .title {
          font-size: 16px;
          font-family: PingFang SC-Medium, PingFang SC;
          font-weight: 500;
          color: #000000;
          position: relative;
          margin-bottom: 8px;
        }
        .title::before {
          content: "";
          width: 2px;
          height: 12px;
          position: absolute;
          left: -16px;
          top: 4px;
          background-color: #276fe8;
        }
      }
      .checkCenter {
        .timePick {
          display: flex;
          align-items: center;
          .left,
          .right {
            width: 139px;
            height: 36px;
            border-radius: 4px 4px 4px 4px;

            .inputTime {
              height: 100%;
              width: 100%;
              border: none;
              outline: none;
              border: none;
              -webkit-appearance: none; //隐藏移动端小箭头
              border-radius: 4px 4px 4px 4px;
              color: rgba(0, 0, 0, 0.4);
              background: rgba(0, 0, 0, 0.04);
              font-size: 14px;
              text-indent: 14px;
            }
            .inputTime::-webkit-input-placeholder {
              /* WebKit, Blink, Edge */
              font-size: 14px;
              color: rgba(0, 0, 0, 0.4);
            }
            :-moz-placeholder {
              /* Mozilla Firefox 4 to 18 */
              font-size: 14px;
              color: rgba(0, 0, 0, 0.4);
            }
            .inputTime::-moz-placeholder {
              /* Mozilla Firefox 19+ */
              font-size: 14px;
              color: rgba(0, 0, 0, 0.4);
            }

            :-ms-input-placeholder {
              /* Internet Explorer 10-11 */
              font-size: 14px;
              color: rgba(0, 0, 0, 0.4);
            }
            .inputTime::-ms-input-placeholder {
              /* Microsoft Edge */
              font-size: 14px;
              color: rgba(0, 0, 0, 0.4);
            }
          }
        }
      }

      .documentBox {
        opacity: 1;
        border-radius: 4px;
        margin-top: 16px;
        position: relative;
        .table {
          width: 100%;
          // border-collapse: collapse;
          margin-bottom: 24px;
          border-collapse: separate;
          border-spacing: 0;
          border-radius: 10px;
          th {
            border: 1px solid rgba(38, 111, 232, 0.2);
            background: rgba(38, 111, 232, 0.15);
            font-size: 14px;
            font-family: PingFang SC-Regular, PingFang SC;
            font-weight: 400;
            color: rgba(0, 0, 0, 0.9);
          }
          .td {
            border: 1px solid rgba(38, 111, 232, 0.2);
            font-size: 14px;
            font-family: PingFang SC-Regular, PingFang SC;
            font-weight: 400;
            color: rgba(0, 0, 0, 0.9);
            text-align: center;
          }
          .handle {
            color: #266fe8;
          }
        }
        .table tr:first-child th:first-child {
          border-top-left-radius: 4px; /* 设置table左下圆角 */
        }
        .table tr:first-child th:last-child {
          border-top-right-radius: 4px; /* 设置table右下圆角 */
        }
        .table tr:last-child td:first-child {
          border-bottom-left-radius: 4px; /* 设置table左下圆角 */
        }
        .table tr:last-child td:last-child {
          border-bottom-right-radius: 4px; /* 设置table右下圆角 */
        }
        .leftPaginate {
          width: 36px;
          height: 36px;
          background: linear-gradient(
            270deg,
            #e5e5e5 53%,
            rgba(229, 229, 229, 0) 100%
          );
          position: absolute;
          top: 40%;
          left: -20px;
          border-radius: 50%;
        }
        .leftPaginate::before {
          content: "";
          width: 13px;
          height: 13px;
          border-top: 2px solid #266fe8;
          border-left: 2px solid #266fe8;
          position: absolute;
          transform: rotate(-45deg);
          left: 11px;
          top: 30%;
        }
        .rightPaginate {
          width: 36px;
          height: 36px;
          background: linear-gradient(
            90deg,
            #e5e5e5 53%,
            rgba(229, 229, 229, 0) 100%
          );
          position: absolute;
          top: 40%;
          right: -20px;
          border-radius: 50%;
        }
        .rightPaginate::before {
          content: "";
          width: 13px;
          height: 13px;
          border-top: 2px solid #266fe8;
          border-left: 2px solid #266fe8;
          position: absolute;
          transform: rotate(135deg);
          right: 11px;
          top: 30%;
        }
        .dot {
          display: flex;
          position: absolute;
          left: 50%;
          transform: translateX(-50%);
          -ms-transform: translateX(-50%); /* IE 9 */
          -moz-transform: translateX(-50%); /* Firefox */
          -webkit-transform: translateX(-50%); /* Safari 和 Chrome */
          -o-transform: translateX(-50%); /* Opera */
          .item {
            width: 8px;
            height: 8px;
            background: #dbdbdb;
            border-radius: 50%;
            margin-right: 10px;
          }
          .active {
            background: #276fe8;
          }
          .item:last-child {
            margin-right: 0;
          }
        }
      }
    }
    .markSituation {
      margin: 0 16px;
      padding: 16px 16px 16px 16px;
      background: #ffffff;
      box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.12);
      border-radius: 6px 6px 6px 6px;
      margin-bottom: 16px;
      .InsTop {
        .title {
          font-size: 16px;
          font-family: PingFang SC-Medium, PingFang SC;
          font-weight: 500;
          color: #000000;
          position: relative;
          margin-bottom: 8px;
        }
        .title::before {
          content: "";
          width: 2px;
          height: 12px;
          position: absolute;
          left: -16px;
          top: 4px;
          background-color: #276fe8;
        }
      }
      .InsCenter {
        display: flex;
        .InsItem {
          display: flex;
          flex-direction: column;
          align-items: center;
          position: relative;
          .InsItemTop {
            margin-bottom: 16px;
            font-size: 14px;
            font-family: PingFang SC-Regular, PingFang SC;
            font-weight: 400;
            color: #000000;
          }
          .InsItemBottom {
            font-size: 18px;
            font-family: PingFang SC-Medium, PingFang SC;
            font-weight: 500;
            color: #276fe8;
          }
        }
        // 岸标左边的竖线
        .shore::after {
          content: "";
          width: 1px;
          background: rgba(0, 0, 0, 0.1);
          height: 36px;
          position: absolute;
          top: 10%;
          right: -25px;
        }
        // 岸标左边的竖线
        .fixed::before {
          content: "";
          width: 1px;
          background: rgba(0, 0, 0, 0.1);
          height: 36px;
          position: absolute;
          top: 10%;
          left: -23px;
        }
      }
      .InsBottom::before {
        content: "";
        width: 311px;
        height: 1px;
        background: rgba(0, 0, 0, 0.1);
        position: absolute;
        top: -16px;
        left: 0;
      }
      .InsBottom {
        margin-top: 32px;
        position: relative;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .BLeft,
        .BRight {
          display: flex;
          align-items: center;
          .left {
            font-size: 14px;
            font-family: PingFang SC-Regular, PingFang SC;
            font-weight: 400;
            color: #000000;
            margin-left: 18px;
            margin-right: 12px;
          }
          .right {
            font-size: 20px;
            font-family: PingFang SC-Medium, PingFang SC;
            font-weight: 500;
            color: #00c462;
            margin-right: 20px;
          }
        }
      }
    }
  }
}
// 水位净高
.WaterLevel {
  margin: 12px 16px 16px 16px;
  .datePicker {
    display: flex;
    justify-content: space-between;
    margin-bottom: 16px;
    .datePicLeft {
      display: flex;
      border-radius: 4px 4px 4px 4px;
      opacity: 1;
      .day,
      .month,
      .year,
      .customize {
        border-left: 1px solid rgba(38, 111, 232, 0.7);
        border-top: 1px solid rgba(38, 111, 232, 0.7);
        border-bottom: 1px solid rgba(38, 111, 232, 0.7);
        padding: 7px 10px;
        font-size: 14px;
        font-family: PingFang SC-Medium, PingFang SC;
        font-weight: 500;
        color: #266fe8;
      }
      .active {
        font-size: 14px;
        font-family: PingFang SC-Medium, PingFang SC;
        font-weight: 500;
        color: #ffffff;
        background-color: #266fe8;
      }
    }
    .datePicRight {
      flex: 1;
      ::v-deep .van-dropdown-menu {
        height: 36px;
      }
      ::v-deep .van-dropdown-menu__bar {
        height: 36px;
      }
      ::v-deep .van-dropdown-menu__item {
        justify-content: start;
        background: #f5f5f5;
      }
      ::v-deep .van-dropdown-menu__title:after {
        position: absolute;
        top: 50%;
        // right: -180px;
        right: -120%;
        margin-top: -10px;
        border: 3px solid;
        border-color: transparent transparent #266fe8 #266fe8;
        transform: rotate(-45deg);
        opacity: 0.8;
        content: "";
        width: 6px;
        height: 6px;
        margin-right: 10px;
      }
    }
  }
  .waterMeasurement {
    margin-top: 16px;
    margin-bottom: 16px;
    display: flex;
    background: #ffffff;
    box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.12);
    border-radius: 6px 6px 6px 6px;
    padding: 14px 24px 6px 24px;
    justify-content: space-evenly;
    .item {
      display: flex;
      flex-direction: column;
      align-items: center;
      .top {
        font-size: 14px;
        font-family: PingFang SC-Medium, PingFang SC;
        font-weight: 500;
        color: #000000;
        margin-bottom: 13px;
      }
      .bottom {
        font-size: 20px;
        font-family: PingFang SC-Bold, PingFang SC;
        font-weight: bold;
        color: #266fe8;
      }
    }
  }
  .waterLevelBox {
    // padding: 10px;
    background: #ffffff;
    // box-shadow: 0px 2px 8px 0px rgba(0,0,0,0.12);
    // border-radius: 6px 6px 6px 6px;
  }
  :deep(.van-dropdown-menu__item) {
    background: #f5f5f5;
    border-radius: 4px;
  }
  :deep(.van-dropdown-menu__title) {
    width: 100%;
    height: 36px;
    line-height: 36px;
  }
  :deep(.van-cell__value) {
    padding-right: 6%;
  }
  ::v-deep .van-dropdown-menu__bar {
    height: 36px;
  }
  ::v-deep .van-dropdown-menu__item {
    justify-content: start;
    background: #f5f5f5;
  }
  ::v-deep .van-dropdown-menu__title:after {
    position: absolute;
    top: 50%;
    right: 5%;
    margin-top: -10px;
    border: 3px solid;
    border-color: transparent transparent #266fe8 #266fe8;
    transform: rotate(-45deg);
    opacity: 0.8;
    content: "";
    width: 6px;
    height: 6px;
  }
}
// 通航情况
.NavigationSituation {
  margin: 12px 16px 16px 16px;
  .datePicker {
    display: flex;
    justify-content: space-between;
    .datePicLeft {
      display: flex;
      border-radius: 4px 4px 4px 4px;
      opacity: 1;
      .day,
      .month,
      .year,
      .customize {
        border-left: 1px solid rgba(38, 111, 232, 0.7);
        border-top: 1px solid rgba(38, 111, 232, 0.7);
        border-bottom: 1px solid rgba(38, 111, 232, 0.7);
        padding: 7px 10px;
        font-size: 14px;
        font-family: PingFang SC-Medium, PingFang SC;
        font-weight: 500;
        color: #266fe8;
      }
      .active {
        font-size: 14px;
        font-family: PingFang SC-Medium, PingFang SC;
        font-weight: 500;
        color: #ffffff;
        background-color: #266fe8;
      }
    }
    .datePicRight {
      flex: 1;
      ::v-deep .van-dropdown-menu {
        height: 36px;
      }
      ::v-deep .van-dropdown-menu__bar {
        height: 36px;
      }
      ::v-deep .van-dropdown-menu__item {
        justify-content: start;
        background: #f5f5f5;
      }
      ::v-deep .van-dropdown-menu__title:after {
        position: absolute;
        top: 50%;
        // right: -180px;
        right: -120%;
        margin-top: -10px;
        border: 3px solid;
        border-color: transparent transparent #266fe8 #266fe8;
        transform: rotate(-45deg);
        opacity: 0.8;
        content: "";
        width: 6px;
        height: 6px;
        margin-right: 10px;
      }
    }
  }
  .echartBox {
    // margin: 0 auto;
    background: #fff;
  }
}
// 关联桥梁
.AssociatedBridge {
  margin: 12px 16px 66px 16px;
  .bridgeItem {
    background-color: #fff;
    padding: 16px;
    box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.12);
    border-radius: 6px 6px 6px 6px;
    display: flex;
    justify-content: space-between;
    margin-bottom: 12px;
    .bridegItemL {
      font-size: 14px;
      font-family: PingFang SC-Medium, PingFang SC;
      font-weight: 500;
    }

    .bridegItemR {
      font-family: "iconfont";
      font-size: 16px;
      font-style: normal;
      color: #266fe8;
    }
  }
}
</style>